Buefy — Dropdowns

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Dropdown

Buefy comes with its own dropdown component.

For example, we can add one by writing:

<template>
  <section>
    <b-dropdown aria-role="list">
      <button class="button is-primary" slot="trigger" slot-scope="{ active }">
        <span>Click me!</span>
        {{active ? '&#x2191;': '&#x2193;'}}
      </button>

<b-dropdown-item aria-role="listitem">foo</b-dropdown-item>
      <b-dropdown-item aria-role="listitem">bar</b-dropdown-item>
      <b-dropdown-item aria-role="listitem">baz</b-dropdown-item>
    </b-dropdown>
  </section>
</template>

<script>
export default {
  name: "App"
};
</script>

The trigger slot has the button to trigger the dropdown.

active indicates whether the dropdown is open or not.

We can add a right-click menu with:

<template>
  <section>
    <b-dropdown :triggers="['contextmenu']">
      <button class="button is-link" slot="trigger" role="button">Right click</button>

      <b-dropdown-item aria-role="listitem">foo</b-dropdown-item>
      <b-dropdown-item aria-role="listitem">bar</b-dropdown-item>
      <b-dropdown-item aria-role="listitem">baz</b-dropdown-item>
    </b-dropdown>
  </section>
</template>

<script>
export default {
  name: "App"
};
</script>

We set the triggers prop to [‘contextmenu’] to make it open on right-click.

Drop Down Content and Position

We can add the custom prop to put any kind of content into our dropdown items.

For example, we can write:

<template>
  <section>
    <b-dropdown>
      <button class="button is-link" slot="trigger" role="button">Click</button>

      <b-dropdown-item :focusable="false" custom paddingless>
        <form action>
          <div class="modal-card" style="width:300px;">
            <section class="modal-card-body">
              <b-field label="Email">
                <b-input type="email" placeholder="Your email" required></b-input>
              </b-field>

              <b-field label="Password">
                <b-input type="password" password-reveal placeholder="Your password" required></b-input>
              </b-field>
            </section>
            <footer class="modal-card-foot">
              <button class="button is-primary">Login</button>
            </footer>
          </div>
        </form>
      </b-dropdown-item>
    </b-dropdown>
  </section>
</template>

<script>
export default {
  name: "App"
};
</script>

We add the custom prop to our b-dropdown-item so that we can add a form into our dropdown as a dropdown item.

Links

Dropdown items can have links if we add the has-link prop to the item.

For example, we can write:

<template>
  <section>
    <b-dropdown>
      <button class="button is-link" slot="trigger" role="button">Click</button>

      <b-dropdown-item has-link>
        <a href="https://google.com" target="_blank">
          <b-icon icon="link"></b-icon>Google (link)
        </a>
      </b-dropdown-item>
      <b-dropdown-item value="home">
        <b-icon icon="home"></b-icon>Home
      </b-dropdown-item>
    </b-dropdown>
  </section>
</template>

<script>
export default {
  name: "App"
};
</script>

Customizing with v-model

We can add the v-model directive to control our dropdown menu programmatically.

For example, we can write:

<template>
  <section>
    <b-dropdown v-model="isPublic">
      <button class="button is-primary" type="button" slot="trigger">
        <template v-if="isPublic">
          <span>Public</span>
        </template>
        <template v-else>
          <span>Friends</span>
        </template>
      </button>

      <b-dropdown-item :value="true">
        <div class="media">
          <div class="media-content">
            <h3>Public</h3>
            <small>Everyone can see</small>
          </div>
        </div>
      </b-dropdown-item>

      <b-dropdown-item :value="false">
        <div class="media">
          <div class="media-content">
            <h3>Friends</h3>
            <small>Only friends can see</small>
          </div>
        </div>
      </b-dropdown-item>
    </b-dropdown>
  </section>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isPublic: false
    };
  }
};
</script>

We can set the v-model to set the selected item.

The value prop is the value of the selected item.

Conclusion

We can create dropdown menus with various options with Buefy.